/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 佣金  brokerage = 佣金 -->
		<view class="brokerage">
			<text>佣金</text>
			<text>￥{{userinfo.yongjin}}</text>
			<text @click="openTixian">提现</text>
			<text>{{set.txtext}}</text>
			<text>最低提现金额{{set.tx_min}}元</text>
		</view>
		
		<view class="yjmx">
			<text>佣金明细(最近200条)</text>
		</view>
		
		
		<view class="tixian" v-if="isTixian === true">
			<view class="tixian-box">
				<view class="tixian-box-top">
					<text>当前佣金：{{userinfo.yongjin?userinfo.yongjin:0}}</text>
					<view class="money-input">
						<text>提现金额：</text>
						<input type="digit" placeholder="请输入提现金额" v-model="txmoney" />
					</view>
					<view class="money-input">
						<text>提现方式：</text>
						<ccPicker style="width: 250upx;" class="item" :range="txtypes" null_str="不限" null_val="" k="label" v="value" v-model="txtype" @picker_change="txtype_change"></ccPicker>
					</view>
					<view class="money-input" style="flex-direction: column;align-items: flex-start;" v-if="txtype=='card'">
						<text>开户行：{{userinfo.khh}}</text>
						<text>银行卡号：{{userinfo.cardnum}}</text>
					</view>
					<view class="money-input"  v-if="txtype=='alipay'">
						<text>支付宝：{{userinfo.alipay}}</text>
					</view>
					<view class="money-input"  v-if="txtype=='wechat'">
						<text>微信：{{userinfo.wechat}}</text>
					</view>
				</view>
				<view class="tixian-box-bottom">
					<text @click="closeTixian">关闭</text>
					<text @click="txbtn">提现</text>
				</view>
			</view>
		</view>
		

		
		<wyb-table v-if="contents != []" height="auto" ref="table" first-line-fixed="true" :headers="headers" :contents="contents" :url-col="urlCol" />
		
		<view class="img" v-if="contents == []">
			<image src="../static/noshouyi.png" mode="aspectFit"></image>
		</view>
		
		
		
	</view>
</template>

<script>
	import { postYongjin, postTixian } from '@/request/fenxiao'
	import ccPicker from "../components/cc-picker/cc-picker.vue"
	import wybTable from '../components/wyb-table/wyb-table.vue'
	export default {
		components: {wybTable,ccPicker},
		data() {
			return {
				isTixian: false,
				txmoney: 0,
				userinfo: {},
				set:{},
				headers: [
					{label: '订单号',key: 'orderid'},
					{label: '佣金',key: 'yongjin'},
					{label: '商品名称',key: 'goodsname'}, 
					{label: '商品ID',key: 'goodsid'}, 
					{label: '商品类型',key: 'goodstype'}, 
					{label: '贡献人UID',key: 'gxruid'},
					{label: '昵称',key: 'nickname'},
					{label: '事件',key: 'event'},
					{label: '购买时间',key: 'addtime'}],
				contents: [],
				urlCol: [{
						type: 'route',
						key: 'url'
				}, {
						type: 'http',
						key: 'link'
				}],
				txtypes:[
					{label:'银行卡',value:'card'},
					{label:'支付宝',value:'alipay'},
					{label:'微信',value:'wechat'},
				],
				txtype:'',
				txtype_show:false
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad() {
			let userinfo = uni.getStorageSync('userinfo')
			this.set=uni.getStorageSync('base_set')
			this.userinfo = userinfo.userdata
			postYongjin({uid: userinfo.uid}).then(res => {
				console.log(res.data)
				this.contents=res.data.data
			})
		},
		onUnload() {
			this.contents=[]
		},
		methods: {
			txtype_change(e) {
				console.log(e)
				this.txtype = e.new_v;
			},
			select_txtype(){
				this.txtype_show=true
			},
			openTixian () {
				this.isTixian = true
			},
			closeTixian(){
				this.isTixian=false
			},
			txbtn() {
				let userinfo = uni.getStorageSync('userinfo')
				var userdata =userinfo.userdata
				if((userdata.cardnum==null || userdata.cardnum=='') || (userdata.alipay==null || userdata.alipay=='') || (userdata.wechat==null || userdata.wechat=='')){
					uni.showToast({
						title: '提现资料不完整,请先完善',
						icon:'none'
					});
					return false;
				}
				if(this.txmoney<=0){
					uni.showToast({
						title: '提现金额不能为0',
						icon:'none'
					});
					return false;
				}
				if(this.txtype==''){
					uni.showToast({
						title: '请选择提现方式',
						icon:'none'
					});
					return false;
				}
				if(parseFloat(this.userinfo.yongjin).toFixed(3) >= parseFloat(this.set.tx_min).toFixed(3) && parseFloat(this.txmoney).toFixed(3)>=parseFloat(this.set.tx_min).toFixed(3)) {
					if(parseFloat(this.txmoney).toFixed(3)<parseFloat(this.userinfo.yongjin).toFixed(3)){
						postTixian({uid: userinfo.uid, txmoney: parseFloat(this.txmoney).toFixed(3),txtype:this.txtype}).then(res => {
							console.log(res.data)
							if(res.data.code==0){
								uni.showToast({
									title:res.data.msg
								})
								setTimeout(()=>{
									uni.navigateBack({
										
									})
								},1000)
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						})
					}else{
						console.log(parseFloat(this.txmoney).toFixed(3))
						console.log(parseFloat(this.userinfo.yongjin).toFixed(3))
						uni.showToast({
							title: '提现金额大于佣金,请检查！',
							icon:'none'
						});
					}
				}else {
					uni.showToast({
						title: '亲！满'+this.set.tx_min+'元才可以提现！',
						icon:'none'
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>

// 佣金
.brokerage {
	height: 350upx;
	padding-top: 60upx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1upx solid #ddd;
	text:nth-child(1) {
		font-size: 34upx;
		color: #333;
	}
	text:nth-child(2) {
		font-size: 30upx;
		font-weight: 700;
		color: #333;
		margin-top: 20upx;
	}
	text:nth-child(3) {
		width: 150upx;
		height: 60upx;
		border: 2upx solid #4b89ff;
		color: #4b89ff;
		font-size: 28upx;
		letter-spacing: 4upx;
		text-align: center;
		line-height: 60upx;
		border-radius: 60upx;
		margin-top: 10upx;
	}
	text:nth-child(4) {
		font-size: 28upx;
		color: #333;
		margin-top: 30upx;
	}
}

// 提现
.tixian {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background: rgba(9,9,9,.3);
	&-box {
		width: 600upx;
		// height: 420upx;
		background-color: #fff;
		border-radius: 20upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -80%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-top {
			padding: 30upx 20upx 50upx;
			display: flex;
			flex-direction: column;
			text {
				font-size: 34upx;
				color: #333;
			}
			text:nth-child(2) {
				margin: 20upx 0;
			}
			.money-input {
				margin-top: 20upx;
				display: flex;
				align-items: center;
				input {
					height: 60upx;
					border: 2upx solid #ddd;
					border-radius: 10upx;
					padding-left: 10upx;
				}
			}
		}
		&-bottom {
			border-top: 2upx solid #ddd;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text {
				width: 50%;
				height: 90upx;
				// background-color: #007AFF;
				color: #333;
				font-size: 34upx;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			text:last-child {
				color: #4b89ff;
			}
		}
	}
}




.yjmx {
	height: 80upx;
	display: flex;
	align-items: center;
	padding-left: 30upx;
	text {
		font-size: 34upx;
		color: #a1a8bf;
	}
}


.img {
	height: 300upx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34upx;
	color: #333;
	image {
		width: 150upx;
		height: 150upx;
	}
}


</style>
